<template>
    <el-date-picker
            v-model="state.dataTime"
            :type="state.type"
            :value-format="state.valueFormat"
            clear-icon
            :format="state.dateTmp"
            :disabled-date="disabledDate"
            ref="hidePickerRef"
            :class="state.styleW"
            @change="onPicker"
            :disabled="state.disabled"
            class="today"
    ></el-date-picker>
</template>
<script lang="ts" setup>
    import {
        reactive,
        getCurrentInstance,
        watch,
        ref,
        defineExpose,
        onMounted,
    } from "vue";
    import {useI18n} from "vue-i18n";

    const {t} = useI18n();
    const hidePickerRef = ref();
    const {proxy} = getCurrentInstance() as any;

    import {eco} from "/@/utils/eco/ecoDataTimeUtil.ts"

    const props = defineProps({
        modelValue: {
            type: String,
            default: "",
        },
        dateTmp: {
            type: String,
            default: "",
        },
        showValue: {
            type: String,
            default: "",
        },
        timeType: {
            type: String,
            default: "tax",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        styleW: {
            type: String,
            default: "w-145",
        },
        type: {
            type: String,
            default: "month",
        },
        valueFormat: {
            type: String,
            default: "YYYYMM",
        },
    });

    const state = reactive({
        dataTime: "",
        dateTmp: "",
        showValue: "",
        maxDataTime: "",
        minDataTime: "",
        timeType: "",
        disabled: false,
        styleW: "",
        dataCategory: "cumulative",
        type: "",
        valueFormat: "",
    });

    const January = "1";
    const year_str = "年";
    const month_str = "月";
    const connection = "-";
    const year_tmp = "YYYY";
    const month_tmp = "M";

    const initDefaultDataTime = () => {
        let data = JSON.parse(localStorage.getItem("ecoDataTime"));
        if (state.type == "year") {
            state.dataTime = data.maxDataTime.substr(0, 4);
        } else {
            state.dataTime = data.maxDataTime;
        }
        state.minDataTime = data.minDataTime;
        state.maxDataTime = data.maxDataTime;
    };

    const init = () => {
        state.dateTmp = props.dateTmp;
        state.timeType = props.timeType;
        state.disabled = props.disabled;
        state.styleW = props.styleW;
        state.type = props.type;
        state.valueFormat = props.valueFormat;
        if (props.modelValue) {
            state.dataTime = props.modelValue;
        } else {
            initDefaultDataTime();
        }
        onPicker();
    };

    const onPicker = () => {
        let _month = eco.getMonth(state.dataTime, false);
        let yearTmp = year_tmp + year_str;
        state.dateTmp =
            _month == January
                ? yearTmp + month_tmp + month_str
                : yearTmp + January + connection + month_tmp + month_str;
        changeTime(state.dataCategory);
        proxy.$emit("update:modelValue", state.dataTime);
    };

    const changeTime = (row: any) => {
        state.dataCategory = row;
        let _month = eco.getMonth(state.dataTime, false);
        let yearTmp = year_tmp + year_str;
        if (state.type == "year") {
            state.dateTmp = _month == January ? yearTmp : yearTmp;
        } else {
            if (state.dataCategory == "cumulative") {
                state.dateTmp =
                    _month == January
                        ? yearTmp + month_tmp + month_str
                        : yearTmp + January + connection + month_tmp + month_str;
            } else {
                state.dateTmp = yearTmp + month_tmp + month_str;
            }
        }
        state.showValue = yearStr() + monthStr();
    };

    const handelClick = () => {
        if (state.showValue.substr(5, 8) == "1-12月") {
            state.showValue = state.showValue.substr(0, 4) + year_str;
        }
        return state.showValue;
    };

    const monthStr = () => {
        if (state.type == "year") {
            return "";
        } else {
            var month = eco.getMonth(state.dataTime, true);
            if (state.dataCategory == "cumulative") {
                month = eco.getMonthRange(state.dataTime, true);
            }
            return month;
        }
    };

    const yearStr = () => {
        return eco.getYear(state.dataTime, true);
    };

    const initDataTime = () => {
        return state.dataTime;
    };

    const disabledDate = (time: any) => {
        let startYear = state.minDataTime.substr(0, 4);
        let endYear = state.maxDataTime.substr(0, 4);
        let startMonth = Number(state.minDataTime.substr(4, 2)) - 1;
        let endtMonth = Number(state.maxDataTime.substr(4, 2)) - 1;
        return (
            time.getTime() < new Date(startYear, startMonth, 1).getTime() ||
            time.getTime() > new Date(endYear, endtMonth, 1).getTime()
        );
    };

    onMounted(() => {
        init();
    });

    watch(
        () => [props.modelValue, props.timeType],
        (n, o) => {
            init();
        }
    );
    defineExpose({
        handelClick,
        monthStr,
        yearStr,
        initDataTime,
        changeTime,
    });
</script>